<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>
  <input type="text" id="input">
  <p id="show"></p>
</div>
<script>
  let obj = {};
  const input = document.getElementById('input');
  // 设置代理
  let newObj = new Proxy(obj, {
    set(target, key, value) {
      // vue3里面 此段代码 采用发布订阅的模式 传递到订阅者
      // 调用模板解析 diff 对比改变  更新
      if (key === 'text') {
        input.value = value;
        show.innerHTML = value;
      }
      // this.subtribe.emit('',value)
      return Reflect.set(target, key, value);
    },
    get(target, key) {
      return Reflect.get(target, key);
    }
  });

  input.addEventListener('keyup', function (e) {
    newObj.text = e.target.value;
  })

</script>
</body>
</html>
